<template>
  <a-card class="card" :bordered="false">
    <a-form @submit="handleSubmit" :form="form" class="form">
      <a-row class="form-row" :gutter="16">
        <a-col :lg="6" :md="12" :sm="24">
          <a-form-item label="规格名称">
            <a-input placeholder="请输入商品规格" v-model="item.title" />
          </a-form-item>
        </a-col>
        <a-col :lg="6" :md="12" :sm="24">
          <a-form-item label="价格（元）">
            <a-input-number placeholder="请输入价格"   v-model="item.price" style="width:100%" />
          </a-form-item>
        </a-col>
        <a-col :lg="6" :md="12" :sm="24">
          <a-form-item label="库存">
            <a-input-number placeholder="请输入库存"  v-model="item.quantity" style="width:100%" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row class="form-row" :gutter="16">
        <!-- <a-col :lg="6" :md="12" :sm="24">
                <a-form-item
                  label="商品图片">
                  <a-input placeholder="请输入商品主图地址" />
                </a-form-item>
              </a-col> -->
        <a-form-item label="商品图片">
          <a-upload
            action="/mall-serve/v1/sys/common/uploadImage"
            name="file"
            listType="picture-card"
            :fileList="picList"
            @preview="handlePicPreview"
            @change="handlePicChange"
            :showUploadList="true"
          >
            <div v-if="picList.length < 1">
              <a-icon type="plus" />
              <div class="ant-upload-text">上传</div>
            </div>
          </a-upload>
          <a-modal :visible="previewVisible" :footer="null" @cancel="handlePicCancel">
            <img alt="example" :src="previewImage" />
          </a-modal>
          <!-- <a-input-number v-show="false" placeholder="请输入规格图片" v-model="item.picUrl" style="width:100%" /> -->
        </a-form-item>
      </a-row>

      <a-row class="form-row" :gutter="16" v-show="true">
        <a-col :lg="6" :md="12" :sm="24"></a-col>
      </a-row>
      <a-form-item v-if="showSubmit">
        <a-button htmlType="submit">Submit</a-button>
      </a-form-item>
    </a-form>
    <div>
      <a-button
        size="large"
        v-if="index != 0"
        @click="deleteCandidatesEducation()"
        plain
        type="danger"
        style="float : left"
        >删除</a-button
      >
    </div>
  </a-card>
</template>

<script>
import { getAction } from '@/api/manage'

export default {
  name: 'SkuInfoForm',
  props: {
    showSubmit: {
      default: false
    },
    index: 0,
    item: {
     
    }
  },
  data() {
    return {
      form: this.$form.createForm(this),
      shopList: [],
      shopName: '',
      picList: [],
      imageDownloadUri: '/mall-serve/v1/sys/common/getImageByUri?imageUri=',
      previewVisible: false,
      previewImage: '',
      spuList: [],
      picUrl: '',
      showPrecent: false,
      showprice: true,
      validPercentOff: true,
      validDiscountPriceLimit: true,
      validPriceOff: true
    }
  },
  created() {
    this.cdhi()
  },
  methods: {
    cdhi() {
      let skuresult = this.item
      if (skuresult.picUrl != null && skuresult.picUrl != undefined) {
        this.picList.push({
          uid: Math.random(),
          name: skuresult.picUrl,
          url: this.imageDownloadUri + skuresult.picUrl,
          status: 'done',
          type: 'image/*'
        })
      }
    },
    handlePicPreview(file) {
      console.log(file)
      if (this.isEdit) {
        this.previewImage = file.thumbUrl
        this.previewVisible = true
      } else {
        this.previewImage = file.url || file.thumbUrl
        this.previewVisible = true
      }
    },
    handlePicCancel() {
      this.previewVisible = false
    },
    handlePicChange({ fileList }) {
      this.picList = fileList
      this.item.picUrl = fileList[0].response.result.imageUri
    },
    handlerShopTypeChange(value) {
      let list = this.shopTypeList
      for (let i in list) {
        let temp = list[i]
        if (temp.children != null) {
          for (let j in temp.children) {
            if (temp.children[j].id == value) {
              this.categoryName = temp.children[j].name
            }
          }
        }
      }
    },
    deleteCandidatesEducation() {
      console.log(this.props)
      this.$emit('deleteIndex', this.index)
    },
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          this.$notification['error']({
            message: 'Received values of form:',
            description: values
          })
        }
      })
    },
    handleSearch(value) {
      let params = { shopName: value + '*' }
      getAction('/shop/web/shopList', params).then(res => {
        if (res.success) {
          this.shopList = res.result.records
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
      })
    },
    handleChange(value) {
      let params = { shopId: value }
      getAction('/goodsMain/web/list', params).then(res => {
        if (res.success) {
          this.spuList = res.result.records
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
      })
    },
    changeType(value) {
      if (value == 1) {
        this.showprice = true
        this.showPrecent = false
        ;(this.validPercentOff = false), (this.validDiscountPriceLimit = false), (this.validPriceOff = true)
        this.$nextTick(() => {
          this.form.validateFields(['couponTemplate.percentOff'], { force: true })
          this.form.validateFields(['couponTemplate.discountPriceLimit'], { force: true })
          this.form.validateFields(['couponTemplate.priceOff'], { force: true })
        })
      }
      if (value == 2) {
        this.showprice = false
        this.showPrecent = true
        ;(this.validPercentOff = true), (this.validDiscountPriceLimit = true), (this.validPriceOff = false)
        this.$nextTick(() => {
          this.form.validateFields(['couponTemplate.percentOff'], { force: true })
          this.form.validateFields(['couponTemplate.discountPriceLimit'], { force: true })
          this.form.validateFields(['couponTemplate.priceOff'], { force: true })
        })
      }
    },

    checkPriceOff(rule, value, callback) {
      if (
        this.showprice == true &&
        this.form.getFieldValue('couponTemplate.priceAvailable') != undefined &&
        this.form.getFieldValue('couponTemplate.priceAvailable') > 0 &&
        this.form.getFieldValue('couponTemplate.priceAvailable') < this.form.getFieldValue('couponTemplate.priceOff')
      ) {
        console.log('checkPriceOff')

        callback('优惠金额不能大于起用金额')
      }
    },
    checkDiscountPriceLimit(rule, value, callback) {
      if (
        this.showPrecent == true &&
        this.form.getFieldValue('couponTemplate.priceAvailable') != undefined &&
        this.form.getFieldValue('couponTemplate.priceAvailable') > 0 &&
        this.form.getFieldValue('couponTemplate.priceAvailable') <
          this.form.getFieldValue('couponTemplate.discountPriceLimit')
      ) {
        console.log('checkDiscountPriceLimit')

        callback('折扣上限金额不能大于起用金额')
      }
    }
  }
}
</script>

<style scoped></style>
